<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
          background-color: #ccc;
        }
    
        #app {
          width: 400px;
          margin: 20px auto;
          background-color: #fff;
          border: 4px solid blueviolet;
          border-radius: 1em;
          box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
          padding: 1em 2em 2em;
        }
    
        #app h3 {
          text-align: center;
        }
    
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid #ccc;
          padding: 0 1em;
        }
    
        .title h4 {
          line-height: 2;
          margin: 0;
        }
    
        .container {
          border: 1px solid #ccc;
          padding: 0 1em;
        }
    
        .btn {
          /* 鼠标改成手的形状 */
          cursor: pointer;
        }
      </style>
</head>
<body>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <div>
          <div class="title">
            <h4>芙蓉楼送辛渐</h4>
            <span class="btn" @click="fn">
              {{isShow?'收起':'展开'}}
            </span>
          </div>
          <div class="container" v-show="isShow" >
            <p>寒雨连江夜入吴,</p>
            <p>平明送客楚山孤。</p>
            <p>洛阳亲友如相问，</p>
            <p>一片冰心在玉壶。</p>
          </div>
        </div>
      </div>
      <script src="./vue.js"></script>
      <script>
        const app = new Vue({
            el:'#app',
            data:{
                isShow: true,
            },
            methods:{
                fn() {
                    this.isShow = !this.isShow
                }
            }
        })
      </script>

    
</body>
</html>